<template>
  <div class="login-bg">
    <div v-if="renovate" class="login-box">
      <h1 class="login-title">欢迎来到xxxx系统</h1>
      <a-form
        :form="form"
        :label-col="{ span: 6 }"
        labelAlign="left"
        :wrapper-col="{ span: 18 }"
        @submit="handleSubmit"
      >
        <a-form-item label="登陆账号">
          <a-input
            allow-clear
            v-decorator="[
              'accNum',
              { rules: [{ required: true, message: '请输入账号!' }] },
            ]"
          />
        </a-form-item>
        <a-form-item label="登陆密码">
          <a-input
            allow-clear
            v-decorator="[
              'password',
              {
                rules: [{ required: true, message: '请输入密码!' }],
              },
            ]"
          />
        </a-form-item>
        <a-form-item v-if="isLogin" label="再次密码">
          <a-input
            v-decorator="[
              'repPwd',
              { rules: [{ required: true, message: '请再次输入密码!' }] },
            ]"
          />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
          <!-- <a-button type="primary" html-type="submit"> Submit </a-button> -->
          <base-button
            htmlType="submit"
            :btnText="isLogin ? '注册' : '登陆'"
          ></base-button>
          <p @click="changeLogin" v-if="!isLogin">未拥有账号，去注册</p>
          <p @click="changeLogin" v-else>已拥有账号，去登陆</p>
        </a-form-item>
      </a-form>
      <!-- <base-button></base-button> -->
    </div>
  </div>
</template>

<script>
import baseButton from '../../components/baseButton.vue';
import Request from '../../common/Request';

export default {
  components: {
    baseButton,
  },
  data() {
    return {
      renovate: true,
      isLogin: false,
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'coordinated' }),
    };
  },
  methods: {
    signUp(values) {
      Request.post('/user/sign_up', {
        usrname: values.accNum,
        password: values.password,
        retype: values.repPwd,
      }).then((res) => {
        // eslint-disable-next-line no-console
        console.log(res, '接口信息');
        if (res.state) {
          this.$message.info('注册成功');
          this.isLogin = false;
        } else {
          this.$message.info('密码长度不低于8位');
        }
      });
    },
    login(values) {
      Request.post('/user/sign_in', {
        usrname: values.accNum,
        password: values.password,
      }).then((res) => {
        // eslint-disable-next-line no-console
        console.log(res, '接口信息');
        if (res.state) {
          this.$message.info('登录成功');
          localStorage.setItem('token', 'token');
          localStorage.setItem('exceedTime', new Date().getTime() + 3 * 60 * 60 * 1000);
          // localStorage.setItem('exceedTime', new Date().getTime() + 60 * 1000); // token时效验证
          this.$router.push('/home/dataView');
        } else {
          this.$message.info('账号或密码错误');
        }
      });
    },
    changeLogin() {
      this.isLogin = !this.isLogin;
      this.renovate = false;
      this.$nextTick(() => {
        this.renovate = true;
      });
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          // eslint-disable-next-line no-console
          console.log('Received values of form: ', values);
          if (values.repPwd) {
            this.signUp(values);
          } else {
            this.login(values);
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
// .login-title {
  // margin-left: 50px;
// }
.login-bg {
  height: 100%;
  background-image: url('../../assets/images/d8ad9080a.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.login-box {
  width: 400px;
  position: fixed;
  top: 40%;
  left: 25%;
  transform: translate(-50%, -50%);
}
</style>
